<!-- 活动分享配置模块 -->
<template>
  <a-form
    ref="formRef"
    class="form"
    layout="horizontal"
    labelAlign="left"
    :hideRequiredMark="false"
    :colon="false"
    :labelCol="{ span: 24 }"
    :wrapperCol="{ span: 24 }"
    :model="model"
    :rules="props.isDetail ? [] : props.rules"
  >
    <a-form-item label="分享的文案" name="shareText">
      <a-textarea v-model:value="model['shareText']" :disabled="props.isDetail" :rows="4" placeholder="请输入分享的文案" />
    </a-form-item>
    <a-form-item label="转发给他人的图片链接" name="shareImgAppMessage">
      <gz-upload v-model:src="model['shareImgAppMessage']" :disabled="props.isDetail" bizType="activity" :accept="'.png,.jpg'" />
      <span class="gz-tip-text">推荐比例：5：4</span>
    </a-form-item>
    <a-form-item label="分享到朋友圈的图片链接" name="shareImgTimeline">
      <gz-upload v-model:src="model['shareImgTimeline']" :disabled="props.isDetail" bizType="activity" :accept="'.png,.jpg'" />
      <span class="gz-tip-text">推荐比例：1：1</span>
    </a-form-item>
    <a-form-item label="分享（单次）成功标准" name="shareSuccessStandard">
      <a-radio-group v-model:value="model['shareSuccessStandard']" :disabled="props.isDetail">
        <a-row>
          <a-col :span="12">
            <a-radio :value="0">无要求</a-radio>
          </a-col>
          <a-col :span="12">
            <a-radio :value="1">小程序新用户（注册手机号）</a-radio>
          </a-col>
          <a-col :span="12">
            <a-radio :value="2">未参与过该活动的小程序用户</a-radio>
          </a-col>
          <a-col :span="12">
            <a-radio :value="3">新实名用户</a-radio>
          </a-col>
        </a-row>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="最大允许分享次数" name="shareMaxNum" :wrapper-col="{ span: 12 }">
      <a-input-number
        v-model:value="model['shareMaxNum']"
        :disabled="props.isDetail"
        placeholder="请输入最大允许分享次数"
        :min="1"
        :precision="0"
      />
    </a-form-item>
    <a-form-item label="同一用户周期性分享次数限制类型" name="sharePeriodType">
      <a-radio-group v-model:value="model['sharePeriodType']" :disabled="props.isDetail">
        <a-radio :value="0">不限制</a-radio>
        <a-radio :value="1">限每日</a-radio>
        <a-radio :value="2">限每周</a-radio>
        <a-radio :value="3">限每月</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item label="奖品兑换类型" name="exchangeType">
      <a-radio-group v-model:value="model['exchangeType']" :disabled="props.isDetail">
        <a-radio :value="0">单奖品兑换</a-radio>
        <a-radio :value="1">多奖品中挑选一个兑换</a-radio>
        <a-radio :value="2">积分兑换形式</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item
      v-if="model['sharePeriodType'] !== 0"
      label="同一用户周期性限制分享次数"
      name="sharePeriodTimes"
      :wrapper-col="{ span: 12 }"
    >
      <a-input-number
        v-model:value="model['sharePeriodTimes']"
        :disabled="props.isDetail"
        placeholder="请输入同一用户周期性限制分享次数"
        :min="1"
        :precision="0"
      />
    </a-form-item>

    <a-form-item label="被分享人最大允许助力次数" name="toShareMaxNum" :wrapper-col="{ span: 12 }">
      <a-input-number
        v-model:value="model['toShareMaxNum']"
        :disabled="props.isDetail"
        placeholder="请输入被分享人最大允许助力次数"
        :min="1"
        :precision="0"
      />
    </a-form-item>
    <a-form-item label="同一用户周期性助力次数限制类型" name="toSharePeriodType">
      <a-radio-group v-model:value="model['toSharePeriodType']" :disabled="props.isDetail">
        <a-radio :value="0">不限制</a-radio>
        <a-radio :value="1">限每日</a-radio>
        <a-radio :value="2">限每周</a-radio>
        <a-radio :value="3">限每月</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item
      v-if="model['toSharePeriodType'] !== 0"
      label="同一用户周期性限制助力次数"
      name="toSharePeriodTimes"
      :wrapper-col="{ span: 12 }"
    >
      <a-input-number
        v-model:value="model['toSharePeriodTimes']"
        :disabled="props.isDetail"
        placeholder="请输入同一用户周期性限制助力次数"
        :min="1"
        :precision="0"
      />
    </a-form-item>
  </a-form>
</template>

<script setup>
import { defineProps, defineEmits, computed, reactive, ref, defineExpose, onMounted } from 'vue'
import { useVModel } from '@/utils/useVModel.js'


const emits = defineEmits(['update:modelValue'])

const props = defineProps({
  // 表单绑定值
  modelValue: {
    type: Object,
    default: () => ({
      shareSuccessStandard: 0,  // 分享成功标准
      sharePeriodType: 0, // 同一用户周期性分享次数限制类型
      toSharePeriodType: 0, // 同一用户周期性助力次数限制类型
      exchangeType:0,//奖品兑换类型
    })
  },
  // 是否是详情
  isDetail: {
    type: Boolean,
    default: false
  },
  // 表单校验规则 使用当前组件时可以根据具体情况自定义 默认全部必填
  rules: {
    type: Object,
    default: () => ({
      shareText: [{ required: true, message: '请输入分享文案', trigger: ['blur'] }],
      shareImgAppMessage: [{ required: true, message: '请上传分享图片', trigger: ['blur'] }],
      shareImgTimeline: [{ required: true, message: '请上传分享图片', trigger: ['blur'] }],
      shareSuccessStandard: [{ required: true, message: '请选择分享成功标准', trigger: ['blur'] }],
      shareMaxNum: [{ required: true, message: '请输入最大允许分享次数', trigger: ['blur'] }],
      sharePeriodType: [{ required: true, message: '请选择同一用户周期性分享次数限制类型', trigger: ['blur'] }],
      sharePeriodTimes: [{ required: true, message: '请输入同一用户周期性限制分享次数', trigger: ['blur'] }],
      toShareMaxNum: [{ required: true, message: '请输入被分享人最大允许助力次数', trigger: ['blur'] }],
      toSharePeriodType: [{ required: true, message: '请选择同一用户周期性助力次数限制类型', trigger: ['blur'] }],
      toSharePeriodTimes: [{ required: true, message: '请输入同一用户周期性限制助力次数', trigger: ['blur'] }],
      exchangeType: [{ required: true, message: '请选择奖品兑换类型', trigger: ['blur'] }]
    })
  }
})

const model = useVModel(props, 'modelValue', emits)

// 表单实例
const formRef = ref()

// 传递表单默认值
onMounted(() => {
  emits('update:modelValue', props.modelValue)
})

// 表单校验事件
async function validateFields(fields) {
  return new Promise((resolve, reject) => {
    formRef.value.validateFields(fields).then(() => {
      resolve()
    }).catch(err => {
      reject(err)
    })
  })
}
// 表单重置事件
function clearValidate() {
  if (formRef.value !== undefined) {
    formRef.value.clearValidate()
  }
}

// 暴露表单校验事件
defineExpose({
  validateFields,
  clearValidate
})

</script>

<style lang="less" scoped>
.form{
  width: 80%;
  margin-left: 20px;
  height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar{
    display: none;
  }
}
:deep(.ant-input-number) {
  width: 100%;
}
</style>